<template>
  <div>
    <!-- 表格编辑表单  :validate-event="false"-->
    <el-dialog :title="dialogtitle" :visible.sync="tableEdit_visible" width="50%" :before-close="tableClose">
      <el-form ref="editFormRef" :model="editForm" label-width="100px" :rules="editFormRules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="SKU编码" prop="skuNumber">
              <el-input v-model="editForm.skuNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品名" prop="name">
              <el-input v-model="editForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品种类" prop="species">
              <el-input v-model="editForm.species"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否上架" prop="onShelf">
              <el-select v-model="editForm.onShelf" placeholder="请选择">
                <el-option
                  v-for="item in onShelfOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="基地名称" prop="baseId">
              <el-select v-model="editForm.baseId" placeholder="请选择">
                <el-option
                  v-for="item in baseOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="principalName">
              <el-input v-model="editForm.principalName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保质期" prop="expirationDate">
              <el-input v-model="editForm.expirationDate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最佳口感期" prop="bestTasteDay">
              <el-input v-model="editForm.bestTasteDay"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品等级" prop="grade">
              <el-select v-model="editForm.grade" placeholder="请选择">
                <el-option
                v-for="item in gradeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="包装类型" prop="packageType">
              <el-input v-model="editForm.packageType"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单价" prop="unitPrice">
              <el-input v-model="editForm.unitPrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位" prop="unit">
              <el-input v-model="editForm.unit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item>

            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item>
              <el-button type="primary" @click="editFormOnSubmit">立即修改</el-button>
              <el-button @click="closeform">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
  // 接口数据
  import {
    getBase,
    editProduct
  } from "@/Api/productionmanage/ProductManage"
  export default {
    name: 'ProductionInfoTableAddForm',
    props: {
      tableEdit_visible: {
        type: Boolean,
        default: false
      },
      editForm: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        // 基地选择框
        baseOptions: [],
        // 表单规则
        editFormRules: {
          skuNumber: [{
            required: true,
            message: '请输入'
          }],
          name: [{
            required: true,
            message: '请输入'
          }],
          species: [{
            required: true,
            message: '请输入'
          }],
          onShelf: [{
            required: true,
            message: '请选择'
          }],
          baseId: [{
            required: true,
            message: '请选择'
          }],
          principalName: [{
            required: true,
            message: '请输入'
          }],
          expirationDate: [{
            required: true,
            message: '请输入'
          }],
          bestTasteDay: [{
            required: true,
            message: '请输入'
          }],
          grade: [{
            required: true,
            message: '请选择'
          }],
          packageType: [{
            required: true,
            message: '请输入'
          }],
          unitPrice: [{
            required: true,
            message: '请输入'
          }],
          unit: [{
            required: true,
            message: '请输入'
          }],
        },
        // 表单标题
        dialogtitle: "修改产品",
        // 日期时间选择器快捷按钮
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
      }
    },
    created() {
      this.getBaseInfomation()
    },
    methods: {
      async getBaseInfomation() {
        const { data: res } = await getBase();
        console.log(res)
        if (res.statusCode === 20000) {
          this.baseOptions = res.data;
        } else {
          this.$message.error('获取基地信息失败')
        }
      },
      // 关闭编辑弹窗
      tableClose() {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.closeform();
          })
          .catch(_ => {});
      },
      // 编辑弹窗确定
      editFormOnSubmit() {
        delete this.editForm.baseName;
        this.$refs["editFormRef"].validate(async (valid) => {
          if (valid) {
            console.log(this.editForm);
            const {
              data: res
            } = await editProduct(this.editForm)
            if (res.statusCode === 20000) {
              this.closeform();
              this.$emit('getNewProduct');
              return this.$message.success("修改产品成功");
            } else {
              console.log(res.message);
              return this.$message.error("修改产品失败");
            }
          } else {
            // console.log(res.message);
            return this.$message.error("请输入完整信息");
          }
        });
      },
      // 关闭编辑表单弹窗
      closeform() {
        this.$emit("closeEditDialog", false);
        // if(this.showAddDialog==false){
        // 清空表单
        this.resetform();
        // }
      },
      changePictureSuccess(res) {
        let pic = JSON.parse(res.data);
        this.editForm.picture = pic.url;
      },
      resetform() {
        this.$nextTick(() => {
          this.$refs.editFormRef.resetFields();
        })
      },

    },
    computed: {
      ...mapState({
        qualifiedOptions: (state) => state.product.qualifiedOptions,
        gradeOptions: (state) => state.product.gradeOptions,
        onShelfOptions: (state) => state.product.onShelfOptions,
      }),
    },
    watch: {
      //   formtype: {
      //     handler(newVal, oldVal) {
      //       if (newVal) {
      //         // console.log(newVal);
      //         // this.dialogtitleType = newVal

      //       }
      //       this.getDialogtitle();
      //     },
      //     immediate: true,
      //     deep: true
      //   },
      // },
    }
  }

</script>
<style>

</style>
